import React, { Component } from 'react'
import { StyleSheet, Image } from 'react-native'
import { connect } from 'react-redux'
import { Container, Header, Body, Right, Icon, Button, Title, Tabs, Tab, TabHeading, Text } from 'native-base';
import { createAction, NavigationActions } from '../utils'
import CollectionList from './Home/CollectionList'
import LoveList from './Home/LoveList'
import NewTimeList from './Home/NewTimeList'


const styles = StyleSheet.create({
})


@connect(({ app, login }) => ({ ...login, app }))
class Home extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user) {
      const { dispatch } = this.props
      dispatch({ type: 'app/loadCollection' })
    }
  }

  gotoLogin = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Login' }))
  }
  render() {
    const { user } = this.props
    return (
      <Container>
        <Header hasTabs>
          <Body>
            <Title>Home</Title>
          </Body>
          <Right>
            {
            user ? <Text style={{ color: 'white' }}>{user.username}</Text> :
            <Button transparent onPress={this.gotoLogin} >
              <Text>Login</Text>
            </Button>
          }
          </Right>
        </Header>

        <Tabs>
          <Tab heading={<TabHeading><Icon name="clock" /><Text>最新</Text></TabHeading>}>
            <NewTimeList {...this.props} />
          </Tab>
          <Tab heading={<TabHeading><Text>关注</Text></TabHeading>}>
            <LoveList {...this.props} />
          </Tab>
          <Tab heading={<TabHeading><Icon name="apps" /><Text>收藏</Text></TabHeading>}>
            <CollectionList {...this.props} />
          </Tab>
        </Tabs>
      </Container>
    )
  }
}

export default Home
